<template>
  <a-table :columns="columns" :data="userStore.RoleObject">
    <template #optional="record ">
      <a-button type="text" class="edit" @click="handelEditRole(record)">
        <template #icon>
          <icon-edit/>
        </template>
        <template #default>编辑</template>
      </a-button>
      <a-popconfirm content="确定要删除这条数据吗？" @ok="handelOk(record)">
        <a-button type="text" @click="a(record)">
          <template #icon>
            <icon-delete/>
          </template>
          <template #default>删除</template>
        </a-button>
      </a-popconfirm>
    </template>
  </a-table>
</template>

<script lang="ts" setup>
import {ref, reactive} from 'vue';
import {getUser, deleteRole} from "../../../api/user/user";
import {RoleObj} from "../../../types/tanTypes/role";
import {useUser} from "../../../store/user";
import { Message } from "@arco-design/web-vue";

const show = ref(true)

const columns = reactive([{
  title: '角色名称',
  dataIndex: 'roleName',
  width: 200
}, {
  title: '角色描述',
  dataIndex: 'desc',
  width: 400
}, {
  title: '更新时间',
  dataIndex: 'updateTime',
},
  {
    title: '操作',
    slotName: 'optional',
    width: 400
  }])

// 初始化展示角色
const userStore = useUser()
getUser().then(res => {
  userStore.RoleObject = res.data.results
})
const a = (a: any) => {
  console.log(a.rowIndex)
  console.log(userStore.RoleObject)

}
// 删除角色
const handelOk = async (obj: any) => {
  await deleteRole(obj.record.objectId)
  userStore.RoleObject.splice(obj.rowIndex, 1)
  Message.success('删除成功')

}


// 编辑角色
const handelEditRole = (obj: any) => {
  userStore.visible = true
  userStore.judgeBool = true
  userStore.index = obj.rowIndex
}


</script>
<style lang="scss" scoped>
.edit {
  margin-right: 8px;
}
</style>
